<template>
  <div style="border: 1px solid #ccc" v-if="editorVisible"> <!-- 使用 v-if 控制显示 -->
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
    />
    <Editor
      style="min-height: 200px; overflow-y: hidden;"
      :modelValue="form.content"
      @onCreated="handleCreated"
      :defaultConfig="editorConfig"
      @onChange="handleChange"
    />
  </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import {shallowRef, reactive, watch, onBeforeUnmount, defineProps, defineEmits, ref, onMounted} from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
  formData: {
    type: Object,
    default: () => ({})
  }
});

const form = reactive({
  content: props.formData.content || ''
});

// 向父组件同步数据
const emit = defineEmits(['content']);

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

const editorVisible = ref(false); // 控制编辑器的显示状态

// 工具栏配置
const toolbarConfig = {
  excludeKeys: [
    'fullScreen', // 不显示全屏
    'group-video' // 不显示上传视频
  ]
};

// 菜单配置
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      server: '/adminApi/upload', // 上传图片请求接口路径
      fieldName: 'file',
      maxFileSize: 10 * 1024 * 1024, // 上传图片最大 10MB
      allowedFileTypes: ['image/*'],
      base64LimitSize: 10 * 1024, // 小于该值插入 base64 格式
      headers: {
        Authorization: `${localStorage.getItem('token')}` // 添加 Authorization 头
      },
      customInsert(res, insertFn) {
        if (res.code !== 1) {
          ElMessage.error('上传文件失败，' + res.message);
          return;
        }
        insertFn(res.data, res.data.alt || '', res.data);
      },
      onSuccess(file, res) {
        if (res.code === 1) {
          ElMessage.success(`${file.name} 上传成功`);
        } else {
          ElMessage.warning(`${file.name} 上传出了点异常`);
        }
      },
      onFailed(file) {
        ElMessage.error(`${file.name} 上传失败`);
      },
      onError(file) {
        ElMessage.error(`${file.name} 上传出错`);
      }
    }
  }
};

// 监听父组件传入的 formData
watch(() => props.formData, (newVal) => {
  if (newVal && newVal.content !== form.content) {
    form.content = newVal.content || ''; // 更新内容
  }
}, { immediate: true, deep: true });

const handleChange = (editor) => {
  //调用父组件
  if (editorRef.value && editorRef.value.getHtml() !== form.content) {
    emit('content', editor.getHtml()); // 向父组件发送更新的内容
  }
};

const handleCreated = (editor) => {
  editorRef.value = editor;

  // 初始化编辑器内容
  if (form.content) {
    try {
      editor.clear(); // 清空编辑器内容
      editor.setHtml(form.content || '<p></p>'); // 设置初始内容
    } catch (error) {
      console.error('初始化编辑器内容失败:', error); // 打印错误信息
    }
  } else {
    try {
      editor.clear(); // 清空编辑器内容
      editor.setHtml('<p></p>'); // 设置默认内容
    } catch (error) {
      console.error('初始化编辑器默认内容失败:', error); // 打印错误信息
    }
  }
};

// 组件卸载时销毁编辑器实例
onBeforeUnmount(() => {
  if (editorRef.value) {
    editorRef.value.destroy();
  }
});

onMounted(() => {
  // 页面加载完成后显示编辑器
  editorVisible.value = true;
});


</script>
